<template>
    <div id="dom1" class="car">
        <div id="convas-container"></div>
        <div class="control">
            <div class="controlName">车身颜色修改：
                <ColorPicker v-model="color1" @on-active-change="fnActiveCol" />
            </div>
            <div class="controlName">镜面高光颜色修改：
                <ColorPicker v-model="color2" @on-active-change="fnActiveCol2" />
            </div>

        </div>
    </div>
</template>
<script>
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
// 导入 GUI
import { GUI } from "three/examples/jsm/libs/lil-gui.module.min.js"
// 导入 hdr 加载器
import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader'
// 导入 gltf 加载器
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
// 压缩过的 gltf 用 DRACOLoader 解析器
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
import gsap from "gsap"
export default {
    data() {
        return {
            screenWidth: document.innerWidth,
            guis: null,
            color1: "#ffffff",
            color2: "#ffffff",
            meshColor:"#000000",
            specularColor: "#808080",
            carMesh:null,
        }
    },
    computed: {

    },
    methods: {
        fnActiveCol(val) {
            this.carMesh.color.set(val)
        },
        fnActiveCol2(val) {
            this.carMesh.specular.set(val)
        },
        // 材质
        fnMesh() {
            this.carMesh = new THREE.MeshPhongMaterial({
                color: this.meshColor, // 设置金属颜色
                specular: this.specularColor, // 设置镜面高光颜色
                shininess: 6, // 设置镜面高光强度
                clearcoat: 1,
                clearcoatRoughness: 0,
            })
        },
        init() {
            let width = window.innerWidth; //窗口宽度
            let height = window.innerHeight; //窗口高度RGBELoader
            let k = width / height; //窗口宽高比
            let s = 400; //三维场景显示范围控制系数，系数越大，显示的范围越大
            let DOM = document.getElementById("convas-container");

            // 创建画布
            const scene = new THREE.Scene();
            const renderer = new THREE.WebGLRenderer(
                {
                    antialias: true, // 设置抗锯齿
                }
            );
            renderer.setSize(width, height);
            renderer.setClearColor("#000");
            scene.background = new THREE.Color("#ccc");
            scene.environment = new THREE.Color("#ccc");
            //环境光
            let ambient = new THREE.AmbientLight(0xffffff, 1);
            scene.add(ambient);
            //添加平行光
            const light1 = new THREE.DirectionalLight(0xffffff, 10);
            light1.position.set(0, 0, 10);
            scene.add(light1)
            const light2 = new THREE.DirectionalLight(0xffffff, 10);
            light2.position.set(10, 0, 0);
            scene.add(light2)
            const light20 = new THREE.DirectionalLight(0xffffff, 10);
            light20.position.set(-10, 0, 0);
            scene.add(light20)
            const light3 = new THREE.DirectionalLight(0xffffff, 10);
            light3.position.set(0, 10, 0);
            scene.add(light3)
            const light30 = new THREE.DirectionalLight(0xffffff, 10);
            light30.position.set(0, -10, 0);
            scene.add(light30)
            // 添加建模
            const gltfLoad = new GLTFLoader();
            gltfLoad.load(
                "./model/baoma/baoma.gltf",
                // 加载建模完的回调函数
                (gltf) => {
                    let cubeGlb = gltf.scene;
                    cubeGlb.position.set(0, 0, 0);
                    gltf.scene.traverse((child) => {
                        if (child.isMesh) {
                            // 修改材质属性
                            // 其他修改材质的操作...
                            if (child.name === "plane") {
                                child.visible = false;
                            }
                            // 允许接受投射阴影
                            if (child.isMesh) {
                                child.castShadow = true;
                                child.receiveShadow = true;
                            }
                        }
                    });
                    cubeGlb.traverse((child) => {
                        if (child.isMesh) {
                            // Object_4 车边框
                            // Object_6 车身
                            // Object_11 车中鼻孔
                            // Object_23 玻璃
                            if (child.name === "Object_6") {
                                child.material = this.carMesh;
                            }

                        }
                    })
                    scene.add(cubeGlb)
                }
            )

            // 相机位置
            const camera = new THREE.PerspectiveCamera(45, k, 0.1, 10000);
            camera.position.set(0, 2, 6); //设置相机位置
            camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
            // 添加控制器
            const controls = new OrbitControls(camera, DOM);
            // 添加坐标系
            // const axesHelper = new THREE.AxesHelper(500);
            // scene.add(axesHelper);
            // 添加网格地面
            const gridHelper = new THREE.GridHelper(10, 10);
            gridHelper.material.color = "#cccccc"
            gridHelper.material.opacity = 0.2;
            gridHelper.material.transparent = true;
            scene.add(gridHelper);
            // Dom添加
            DOM.appendChild(renderer.domElement);
            // 渲染场景
            (function fnAnimate(time) {
                renderer.render(scene, camera)
                requestAnimationFrame(fnAnimate);
            })()
        },
    },
    mounted() {
        this.fnMesh();
        this.init();
    },
}
</script>
<style lang="less">
.car {
    position: relative;

    .control {
        position: absolute;
        top: 20px;
        right: 10px;
        background: #ffffff;
        border-radius: 10px;
        padding: 10px;

        .controlName {
            font-size: 18px;
            padding: 10px 0;
        }
    }
}
</style>